<template>
  <header class="game-header">
    <view class="header-left">
      <button class="nav-btn back-btn" @click="navigateToIndex">
        <text class="nav-icon">←</text>
      </button>
      <text class="game-title">🏝️ 荒岛生存</text>
      <view class="day-counter">
        <text class="day-label">第</text>
        <text class="day-number">{{ dayNumber }}</text>
        <text class="day-label">天</text>
      </view>
    </view>
    
    <view class="header-right">
      <button class="header-btn save-btn" @click="openSaveManager" title="保存游戏">
        <text class="btn-icon">💾</text>
      </button>
      <button class="header-btn menu-btn" @click="showGameMenu" title="游戏菜单">
        <text class="btn-icon">☰</text>
      </button>
    </view>
  </header>
</template>

<script>
export default {
  name: 'GameHeader',
  props: {
    dayNumber: {
      type: Number,
      default: 1
    }
  },
  methods: {
    navigateToIndex() {
      this.$emit('navigate-to-index')
    },
    
    openSaveManager() {
      this.$emit('open-save-manager')
    },
    
    showGameMenu() {
      this.$emit('show-game-menu')
    }
  }
}
</script>

<style scoped>
/* 顶部状态栏 */
.game-header {
  background: rgba(30, 41, 59, 0.8);
  backdrop-filter: blur(10rpx);
  border-bottom: 1rpx solid #374151;
  padding: 16rpx 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 24rpx;
}

.nav-btn {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: rgba(102, 126, 234, 0.8);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.nav-btn:active {
  transform: scale(0.95);
  background: rgba(102, 126, 234, 1);
}

.nav-icon {
  font-size: 24rpx;
  color: white;
  font-weight: bold;
}

.game-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #fcd34d;
}

.day-counter {
  display: flex;
  align-items: center;
  gap: 8rpx;
  font-size: 24rpx;
}

.day-label {
  color: #9ca3af;
}

.day-number {
  color: #fcd34d;
  font-weight: bold;
}

.header-right {
  display: flex;
  gap: 16rpx;
}

.header-btn {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: rgba(55, 65, 81, 0.8);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.header-btn:active {
  background: rgba(55, 65, 81, 1);
  transform: scale(0.95);
}

.btn-icon {
  font-size: 24rpx;
  color: #d1d5db;
}
</style>
